<template>
  <el-button @click="setMeta">设置 基础控件 属性11</el-button>
  <br><br>
  <div style="width: 300px;min-height: 100px;">
    文本框：
    <nf-text v-model="model.test" v-bind="textProps"
    >
    </nf-text>
    <br> <br>
    基础控件：
    <component
      :is="formItemKey[textProps.controlType]"
      :model="model"
      :partMeta="partProps"
      v-bind="textProps"
    >
    </component><br>
  </div>
  <br>
  <help-text
    :drawerInfo="drawerInfo"
    :meta="textProps"
  >
  </help-text>

  <el-button @click="myload">测试加载数据</el-button>
</template>

<script>
  import { reactive, watch, ref } from 'vue'
  import { ElDrawer, ElButton, ElInput, ElCheckboxGroup, ElCheckbox } from 'element-plus'
  import { Loading, Connection, Edit, FolderOpened } from '@element-plus/icons-vue'
  import { formItemKey, service, lifecycle } from '@naturefw/ui-elp'

</script>

<script setup>
 
  // 设置表单值
  const model = reactive({
    test: ''
  })

  // 设置控件的meta
  const textProps = reactive({
    colName: 'test',
    kind: 10,
    controlType: 101
  })

  const partProps = reactive({})

  // 监听类型变化，修改控件值
  watch(() => textProps.controlType, (type1, type2) => {
    switch (type1) {
      case 100:
      case 101:
      case 102:
      case 103:
      case 104:
      case 105:
      case 106:
      case 107:
        if (type2 > 109)
          model.test = ''
        break
      case 110:
      case 111:
      case 112:
        if (type2 < 110 || type2 > 119)
          model.test = 0
        break
      case 120:
      case 121:
      case 122:
      case 124:
        if (type2 < 120 || type2 > 124)
          model.test = ''
        break
      case 123: // 年周
        model.test = ''
        break
      case 125: // 日期范围
      case 126:
      case 127:
      case 128:
        if (type2 < 125 || type2 > 128)
          model.test = []
        break
      case 132: // 时间
      case 130:
        model.test = ''
        break
      case 131: // 时间
      case 133:
        model.test = []
        break
      case 150: // 勾选
      case 151: // 开关
        if (type2 < 150 || type2 > 151)
          model.test = false
        break
      case 153: // 单选
      case 160: // 下拉单选
      case 162: // 分组单选
      case 165: // 树单选
        if (type2 !== 153 && type2 !== 160 && type2 !== 162 && type2 !== 165)
          model.test = null
        break
      case 152: // 多选
      case 161: // 下拉多选
      case 163: // 分组多选
      case 166: // 树多选
        if (type2 !== 152 && type2 !== 161 && type2 !== 163 && type2 !== 166)
          model.test = []
        break
      case 164: // 级联下拉
        model.test = []
        break
      default:
        break
    }
  })

  // 控制抽屉的展开收拢
  const drawerInfo = reactive({
    isShow: false
  })

  const setMeta = () => {
    drawerInfo.isShow = true
  }

  // 测试加载数据
  const myload = () => {
    service('100.json','qq=1&bb=2',{a:'11'}).then((res) => {
      console.log('后端反馈 - ok', res)
    }).catch((res) => {
      console.log('后端反馈 - err', res)
    })
  }

</script>